<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/jquery-confirm.min.css">

		<style>
			body {
				background: transparent;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.swiper-container {
				width: 100%;
				/*padding-top: 40px;*/
				padding-bottom: 50px;
				/*-webkit-perspective: 1200px;
				-moz-perspective: 1200px;
				-ms-perspective: 1200px;
				perspective: 1200px*/
			}
			
			.swiper-slide {
				background-position: center;
				background-size: cover;
				width: 80vw;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
				/*height: 100vw;*/
			}
			
			.terminal-card {
				box-shadow: 2px 2px 20px #888888;
			}
			
			.terminal-card .mui-card-header {
				background-color: #007AFF;
				text-align: center;
				font-size: 6vw;
				height: 15vw;
				line-height: 10vw;
				color: white;
			}
			
			.speedchart {
				width: 80vw;
				height: 50vw;
			}
			
			.mui-table {
				text-align: center;
				border-top: solid;
				border-top: 1px solid gainsboro;
				padding-top: 10px;
				line-height: 10vw;
			}
			
			.mui-table thead {
				color: #848484;
				font-weight: initial;
			}
			
			.mui-table tbody {
				color: deepskyblue;
				font-size: large;
			}
			
			.mui-card-footer {
				display: block;
			}
			
			.cmdbutton {
				width: 27%;
				margin-left: 5%;
				margin-top: 5%;
			}
			
			.smallinfo {
				font-size: small;
				position: absolute;
				right: 10px;
				top: 8vw;
				float: right;
			}
			
			.mutil-cmd-div {
				text-align: center;
				font-size: large;
			}
			
			.mutil-cmd-div button {
				font-size: large;
				width: 80%;
			}
			
			.terminalStatusSpan {
				padding: 3px 10px;
				font-size: 0.6em;
				border-radius: 3px;
				line-height: 1em;
				background: #adaeae;
			}
			/*在线要加active的样式*/
			
			.terminalStatusSpan.active {
				background: #4bd96b;
			}
			
			th {
				font-weight: initial;
			}
		</style>

	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper" id="terminaldiv">
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
		<!--<div class="mutil-cmd-div">
			<button class="mui-btn mui-btn-royal" onclick="mui.toast('施工中！',{ duration:'long', type:'div' });">批量控制<span class="mui-icon mui-icon-arrowthinright"></span></button>
		</div>-->
		<!--<div class="mui-segmented-control">
			<a class="mui-control-item mui-active" href="#item1">选项卡1</a>
			<a class="mui-control-item" href="#item2">选项卡1</a>
		</div>-->

		<div class="mui-card terminal-card swiper-slide" id="template" style="display: none;">
			<div class="mui-card-header"><span class="terminalNameSpan">设备名称</span> <span class="terminalStatusSpan">在线</span>
				<div class="smallinfo">备注信息</div>
			</div>
			<!--内容区-->
			<div class="mui-card-content">
				<div class="speedchart" id="speedchart"></div>
				<div>
					<table class="mui-table">
						<thead>
							<th id="th_power">功率</th>
							<th id="th_model">模式</th>
							<th id="th_gear">档位</th>
							<th id="th_time">延时</th>
						</thead>
						<tbody>
							<tr class="datatr">
								<td>--</td>
								<td>--</td>
								<td>--</td>
								<td>--</td>
							</tr>
						</tbody>
					</table>
				</div>

			</div>
			<!--页脚，放置补充信息或支持的操作-->
			<div class="mui-card-footer">
				<div class="cmdext" id="cmddiv">

				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
		<script src="../js/swiper.min.js"></script>
		<script src="../libs/easymob-webim-sdk/echarts.js"></script>
		<script src="../js/jquery-confirm.min.js"></script>
		<script type="text/javascript" src="../js/dateformat.js"></script>
		<script type="text/javascript" src="../libs/jquery.i18n.properties.min.js"></script>
		<script type="text/javascript">
			function gradientColor(startColor, endColor, step) {
				startRGB = this.colorRgb(startColor); //转换为rgb数组模式
				startR = startRGB[0];
				startG = startRGB[1];
				startB = startRGB[2];

				endRGB = this.colorRgb(endColor);
				endR = endRGB[0];
				endG = endRGB[1];
				endB = endRGB[2];

				sR = (endR - startR) / step; //总差值
				sG = (endG - startG) / step;
				sB = (endB - startB) / step;

				var colorArr = [];
				for(var i = 0; i < step; i++) {
					//计算每一步的hex值
					//debugger;
					var hex = this.colorHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')');
					colorArr.push([(i + 1) / step, this.colorHex(hex)]);
				}
				return colorArr;
			}

			// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
			gradientColor.prototype.colorRgb = function(sColor) {
				var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
				var sColor = sColor.toLowerCase();
				if(sColor && reg.test(sColor)) {
					if(sColor.length === 4) {
						var sColorNew = "#";
						for(var i = 1; i < 4; i += 1) {
							sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
						}
						sColor = sColorNew;
					}
					//处理六位的颜色值
					var sColorChange = [];
					for(var i = 1; i < 7; i += 2) {
						sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
					}
					return sColorChange;
				} else {
					return sColor;
				}
			};

			// 将rgb表示方式转换为hex表示方式
			gradientColor.prototype.colorHex = function(rgb) {
				var _this = rgb;
				var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
				if(/^(rgb|RGB)/.test(_this)) {
					var aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
					var strHex = "#";
					for(var i = 0; i < aColor.length; i++) {
						var hex = Number(aColor[i]).toString(16);
						hex = hex < 10 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
						if(hex === "0") {
							hex += hex;
						}
						strHex += hex;
					}
					if(strHex.length !== 7) {
						strHex = _this;
					}
					return strHex;
				} else if(reg.test(_this)) {
					var aNum = _this.replace(/#/, "").split("");
					if(aNum.length === 6) {
						return _this;
					} else if(aNum.length === 3) {
						var numHex = "#";
						for(var i = 0; i < aNum.length; i += 1) {
							numHex += (aNum[i] + aNum[i]);
						}
						return numHex;
					}
				} else {
					return _this;
				}
			}

			var gradient = new gradientColor('#9933ff', '#ff0099', 50);
			//console.log(gradient);
			option = {
				//提示框组件。开发实际中去掉了指针，提示框可以不用设置。
				tooltip: {
					formatter: "{a} <br/>{b} : {c}%"
				},
				//工具栏。本次好像也没用到，刷新，下载，我觉得还是挺实用的，具体开需求！
				toolbox: {
					feature: {
						restore: {},
						saveAsImage: {}
					}
				},
				//下面属性才是仪表盘的核心！！反正我是这么认为的！！！
				series: [{
					//类型
					type: 'gauge',
					min: 0,
					max: 6000,
					//半径
					radius: 150,
					//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
					startAngle: 180,
					//结束角度。
					endAngle: 0,
					center: ['50%', '90%'],
					//仪表盘轴线相关配置。
					axisLine: {
						show: true,
						// 属性lineStyle控制线条样式
						lineStyle: {
							width: 30,
							color: gradient
						}
					},
					//分隔线样式。
					splitLine: {
						length: 25
						//show: false,
					},
					//刻度样式。
					axisTick: {
						show: false,
					},
					//刻度标签。
					axisLabel: {
						show: false,
					},
					//仪表盘指针。
					pointer: {
						//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
						//show: false,
						//指针长度
						length: '90%',
						width: 2,
					},
					//仪表盘标题。
					title: {
						show: true,
						offsetCenter: [0, '-40%'], // x, y，单位px
						textStyle: {
							color: '#hhh',
							fontSize: 30
						}
					},
					//仪表盘详情，用于显示数据。
					detail: {
						show: true,
						offsetCenter: [0, '-10%'],
						formatter: '{value}rpm',
						textStyle: {
							fontSize: 30
						}
					},
					data: [{
						value: 0,
						name: 'RPM'
					}]
				}]
			};

			//			setInterval(function() {
			//				option.series[0].data[0].value = (Math.random() * 1000).toFixed(2) - 0;
			//				pieChart.setOption(option, true);
			//			}, 2000);
			function cmdbuttonClick() {
				var $this = jQuery(this);
				var cid = $this.data("cid");
				var tid = $this.data("tid");
				var cmdid = $this.data("cmdid");
				mui(this).button('loading');
				app.sendCMD(tid, cmdid);
			};

			var paychartlist = {};

			var isEn = false;

			function onRealDataCallback(data) {
				if(data.returnCode != 200) {
					//$.alert(data.returnMessage);
					return;
				}
				$.each(data, function(i, n) {
					//console.log(i);
					if(i == "returnCode" || i == "returnMessage") {
						return;
					}
					var terminaldiv = $("#terminaldiv_" + i);
					if(n.data != undefined && n.data.time != undefined) {
						var time = terminaldiv.data("time");
						if(time != undefined && time != n.data.time) {
							//if (loadingconfirm.isOpen())
							//    loadingconfirm.close();
							mui(".cmdbutton").button('reset');
						}
						terminaldiv.data("time", n.data.time);
					}
					if(n.returnCode != 200) {
						terminaldiv.find(".smallinfo").html(isEn ? "" : n.returnMessage);
						terminaldiv.find(".terminalStatusSpan").removeClass('active').html(isEn ? "Offline" : "不在线");
					} else {
						//console.log(n);
						terminaldiv.find(".terminalStatusSpan").addClass("active").html(isEn ? "Online" : "在线 ");
						terminaldiv.find(".smallinfo").html(new Date(n.data.time).toString());

						//var divlist = terminaldiv.find(".panel-body .row .datacoloum");
						var muitable = terminaldiv.find(".mui-table");
						var tbody = muitable.find(".datatr").find("td");
						//console.log(tbody);
						var hp = muitable.data("realdatahead");
						if(hp == undefined || hp == null || hp == "") return;
						var theadstr = hp.split(';');
						var ths = n.data.data.split(';');
						for(var index = 0, tdindex = 0; index < theadstr.length; index++) {
							if(theadstr[index] == "转速") {
								var paychart = paychartlist[i];
								if(paychart != undefined && paychart != null) {
									var paychartoption = paychart.getOption();
									paychartoption.series[0].data[0].value = Number(ths[index].replace("RPM", ""));
									paychart.setOption(paychartoption, true);
								}
							} else {
								tbody.eq(tdindex).html(ths[index]);
								tdindex++;
							}
							//divlist.eq(index).html(ths[index]);
						} //
					}
				});
			}

			function realData() {
				app.realData(onRealDataCallback);
			}

			function initPage() {
				app.freshTerminal();
				//alert(app.getLanguage());
				if(app.getLanguage() == "en") {
					isEn = true;

					jQuery.i18n.properties({
						name: 'Messages',
						path: '../bundle/',
						mode: 'both',
						async: true,
						language: 'en',
						callback: function() {

							jQuery('#th_power').html(i18n_th_power);
							jQuery('#th_model').html(i18n_th_model);
							jQuery('#th_gear').html(i18n_th_gear);
							jQuery('#th_time').html(i18n_th_time);

							// Accessing a simple value through the map
							//					jQuery.i18n.prop('msg_hello');
							//					// Accessing a value with placeholders through the map
							//					jQuery.i18n.prop('msg_complex', 'John');
							//
							//					// Accessing a simple value through a JS variable
							//					alert(msg_hello + ' ' + msg_world);
							//					// Accessing a value with placeholders through a JS function
							//					alert(msg_complex('John'));
						}
					});
				}
				app.getServerConfig(function(serverconfig) {
					for(var index in serverconfig) {
						var servercmd = app.getConfigCMD(serverconfig[index].configID);
					}

					app.getTerminal("", function(terminals) {
						var terminaldiv = jQuery("#terminaldiv").empty();

						jQuery.each(terminals, function(index, data) {
							var template = jQuery("#template").clone();
							template.attr("id", "terminaldiv_" + data.id);
							template.data("id", data.id);
							template.show();
							var speedchart = template.find("#speedchart");
							speedchart.attr("id", "#speedchart" + data.id);

							template.find(".terminalNameSpan").html(data.terminalName);

							var cmddiv = template.find("#cmddiv");
							var servercmd = app.getConfigCMD(data.socketServerConfig.configID);
							if(servercmd != undefined && servercmd != null) {
								jQuery.each(servercmd, function(cmdindex, cmdinfo) {
									var button = $('<button>');
									//$.alert(cmdinfo.displayName);
									button.text(isEn ? cmdinfo.enName : cmdinfo.displayName);
									button.data("cmdid", cmdinfo.id);
									button.data("cid", cmdinfo.sockerServerConfig.configID);
									button.data("tid", data.id);
									button.data("en", cmdinfo.enName);
									//button.data("loading-icon","mui-spinner mui-spinner-custom");
									button.attr("data-loading-text", (isEn ? "Sedding" : "发送中"));
									button.on("click", cmdbuttonClick);
									button.addClass("mui-btn  mui-col-sm-3 mui-col-sm-offset-1 mui-btn-lg cmdbutton");

									if(cmdinfo.css != undefined && cmdinfo != "") {
										button.addClass("mui-btn-" + cmdinfo.css);
									}
									if(cmdinfo.extButton) {
										cmddiv.append(button);
									} else {
										cmddiv.before(button);
										//cmddiv.append(button);
									}
								});
							}

							var table = template.find(".mui-table");
							table.data("realdatahead", data.socketServerConfig.terminalHPConfig);
							var thead = table.find("thead");
							var tbody = table.find(".datatr");
							thead.empty();
							tbody.empty();
							var theads = data.socketServerConfig.terminalHPConfig.split(";");
							for(var index = 0; index < theads.length; index++) {
								if(theads[index] != "转速") {
									var headstr = theads[index];
									if(isEn) {
										if(headstr == "模式") {
											headstr = "Model";
										} else if(headstr == "功率") {
											headstr = "Power";
										} else if(headstr == "档位") {
											headstr = "Gear";
										} else if(headstr == "延时") {
											headstr = "Time";
										}
									}
									thead.append(jQuery("<th>").html(headstr));
									tbody.append(jQuery("<td>").html("---"));
								}
							}
							terminaldiv.append(template);

							var pieChart = echarts.init(speedchart[0]);
							pieChart.setOption(option, true);

							paychartlist[data.id] = pieChart;
							//console.log(paychartlist);
						});

						var swiper = new Swiper('.swiper-container', {
							//effect: 'coverflow',
							watchSlidesProgress: true,
							grabCursor: true,
							centeredSlides: true,
							slidesPerView: 'auto',
							coverflowEffect: {
								rotate: 50,
								stretch: 0,
								depth: 100,
								modifier: 1,
								slideShadows: true,
							},
							pagination: {
								el: '.swiper-pagination',
								dynamicBullets: true,
							},

							on: {
								setTransition: function setTransition(duration) {
									for(var c = 0; c < this.slides.length; c++) {
										var es = this.slides[c].style;
										es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = duration + "ms"

									}
								},
								progress: function(a, b, c, d) {
									var b, c, d;
									//console.log(this);
									for(b = 0; b < this.slides.length; b++) {
										//							c = this.slides[b];
										//							d = c.progress;
										//							scale = 1 - Math.min(Math.abs(.2 * d), 1);
										//							es = c.style;
										//							es.opacity = 1 - Math.min(Math.abs(d / 2), 1);
										//							var transformval="translate3d(0px,0px," + -Math.abs(150 * d) + "px)";
										//							//console.log(es);
										//							es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = transformval;
										c = this.slides[b],
											d = c.progress,
											scale = 1 - Math.min(Math.abs(.2 * d), 1),
											es = c.style,
											es.opacity = 1 - Math.min(Math.abs(d / 2), 1),
											es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = "translate3d(0px,0px," + -Math.abs(150 * d) + "px) scale(" + scale + ")";
									}
								},
							}
						});
						if(terminals.length > 0) {
							//console.log(terminals)
							setInterval(realData, 1000); // 注意函数名没有引号和括弧！
						} else {
							terminaldiv.append("<h3>暂无设备,您可在‘配置设备’功能中绑定新设备！</h3>");
						}
						//
					});

				});

			}
			//alert("jquery");
			//jQuery(document).ready();
			(function($, doc) {
				$.plusReady(initPage);
			}(mui, document));
		</script>
	</body>

</html>